<template>
  <div class="admin-page">
    <div class="top-bar">
      <div class="admin-info">
        尊敬的{{ adminName }}管理员您好
      </div>
      <p class="title_font">智能交互问答平台</p>
      <el-button type="primary" color='#0997F7' style="margin-left: 78%;" @click="changePass()">修改密码</el-button>
      <el-button type="primary" color='#0997F7'  @click="logout">退出登录</el-button>
      <el-dialog title="修改管理員密碼" v-model="dialogFormVisible" :before-close="handleClose">
        <el-form :model="form">
          <el-form-item label="新密码" :label-width="formLabelWidth">
            <el-input v-model="form.password" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer" @click="dialogFormVisible = false">
            <el-button>取消</el-button>
            <el-button type="primary" @click="saveEdit">
              确认
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <div class="content">
      <div class="sidebar">
        <ul>
          <li @click="selectNavItem(1)" :class="{ active: selectedNavItem === 1 }">学生管理</li>
          <li @click="selectNavItem(2)" :class="{ active: selectedNavItem === 2 }">老师管理</li>
          <li @click="selectNavItem(3)" :class="{ active: selectedNavItem === 3 }">课程管理</li>
          <li @click="selectNavItem(4)" :class="{ active: selectedNavItem === 4 }">课堂管理</li>
        </ul>
      </div>
      <div class="main">
        <div v-if="selectedNavItem === 1">
          <StudentTable></StudentTable>
        </div>
        <div v-if="selectedNavItem === 2">
          <TeacherTable></TeacherTable>
        </div>
        <div v-if="selectedNavItem === 3">
          <CourseTable></CourseTable>
        </div>
        <div v-if="selectedNavItem === 4">
          <ClassTable></ClassTable>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
/* eslint-disable */
import { reactive, ref } from 'vue'
import StudentTable from './TableComponent/StudentTable.vue';
import TeacherTable from './TableComponent/TeacherTable.vue';
import CourseTable from './TableComponent/CourseTable.vue';
import ClassTable from './TableComponent/ClassTable.vue'
import { ElNotification, ElDialog, ElForm, ElFormItem, ElInput, ElButton, ElMessage } from 'element-plus';
import {
  User,
  SwitchButton,
  CaretBottom
} from '@element-plus/icons-vue'
import { allSudentInfoService, allTeacerInfoService, allCourseInfoService, allClassInfoService, changePassword } from '@/api/adminApi/allAdmin'

import { useStore } from './store'
import { useRouter } from 'vue-router';
const router = useRouter()
const store = useStore()
const dialogFormVisible=ref(false)
// const useStore=createStore()
// const personType = reactive({
//   type: ''
// });
const adminName = ref('');
const selectedNavItem = ref(4);
const form =ref({
  password:''
})
const changePass = () => {
  dialogFormVisible.value=true
};
const saveEdit=async()=>{
  const data={
    newPassword:form.value.password
  }
  await changePassword(data)
  .then((res)=>{
  if(res.code===126){
  ElMessage.success('修改成功！')
  }else{
  ElMessage.error('修改出错')
  }
})
  dialogFormVisible.value=false
  
}
const logout = () => {
  router.push('/')
}
const selectNavItem = async (navItemIndex) => {
  selectedNavItem.value = navItemIndex;
  switch (navItemIndex) {
    case (1): {
      const res = await allSudentInfoService()
      store.setStudentList(res)
      break;
    }
    case (2): {
      // personType.value.type = 'teacher';
      const res = await allTeacerInfoService()
      store.setTeacherList(res)
      break;
    }
    case (3): {
      const res = await allCourseInfoService()
      store.setCourseList(res)
      // personType.value.type = 'course';
      break;
    }
    case (4): {
      const data = {
        pageNum: 1,
        pageSize: 2000
      }
      const res = await allClassInfoService(data)
      store.setClassList(res.data)
      console.log(res.data, 'res')
    }
  }
}
</script>

<style>
.admin-page {
  background-color: #f7f9fc;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.title_font {
  color: #f5f5f5;
  font-size: 40px;
  display: inline-block;
  margin-left: 40%;
  /* text-align: center; */
  position: absolute;
}

.inputDiv {
  width: 35%
}

.import-el-button {
  margin-left: 80%;
  margin-top: 0px;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  width: 100%;
  background-color: #0997F7;
  color: #f5f5f5;
  font-size: large;
  height: 80px
}



.admin-info {
  font-size: 16px;
  font-weight: bold;
  margin-left: 20px;
  width: fit-content;
}


.content {
  display: flex;
  width: 100%;
  height: 100%;
  margin-top: 20px;
}

.sidebar {
  position: flex;
  background-color: #fff;
  width: 12%;
  /* height: 10000px; */
  height: 100vh;
  box-shadow: 0 0 5px rgba(0, 0, 0, .1);
  overflow-y: auto;
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  margin-top: 20px;
}

.sidebar ul li {
  font-size: 16px;
  line-height: 2.5;
  padding-left: 20px;
  cursor: pointer;
  transition: background-color .2s ease-in-out;
}

.sidebar ul li:hover {
  background-color: #f7f9fc;
}
.sidebar ul li.active {
  background-color: #0997F7;
  color: #eff1f3;
}

.main {
  flex: 1;
  height: 100%;
  /* padding: 20px; */
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, .1);
  margin-left: 20px;
  overflow-y: auto;
}

.search-form {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.search-form input {
  border: none;
  border-radius: 4px;
  /* padding: 8px 12px; */
  font-size: 16px;
  width: 300px;
  margin-right: 10px;
}



button {
  width: 80px;
  margin-top: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th,
td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid #ccc;
}

th {
  background-color: #f5f5f5;
  font-weight: bold;
  color: #444;
}

tr:hover {
  background-color: #f7f9fc;
}
</style>@/api/adminApi/allAdmin